<script setup>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  CalendarComponent,
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components';
import { HeatmapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { inject } from "vue";
import { onMounted } from "vue";
import {homeSelectAllService} from "@/api/home.js";
import {ElMessage} from "element-plus";
import { ref } from 'vue'

const width = inject('dateEchartsWidth')
const height = inject('dateEchartsHeight')

onMounted(() => {
  initData()
})

const dateFormater = (dateStr) => {
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要加1
  const day = date.getDate();
  return `${year}年${month}月${day}日`;
}

const initData = async() => {
  const dateList = ref([])
  const res = await homeSelectAllService()
  if(res.data.status !== 'success'){
    ElMessage.error(res.data.info)
    return
  }
  dateList.value = res.data.data
  console.log(dateList.value)


  echarts.use([
    TitleComponent,
    CalendarComponent,
    TooltipComponent,
    VisualMapComponent,
    HeatmapChart,
    CanvasRenderer
  ]);

  var chartDom = document.getElementById('dateEcharts');
  var myChart = echarts.init(chartDom);
  var option;

  function getVirtualData(year) {
    const data = [];
      // data.push([new Date('2024-11-10T00:00:00'),5000,50,300000,1])
    for(let i of dateList.value){
      data.push([new Date(i.dateTime),i.userNumbers,i.titleNumbers,i.trainNumbers,i.certificateNumbers])
    }
    return data;
  }
  // function getVirtualData(year, type) {
  //   const data = [];
  //   for(let i of dateList.value){
  //     let entry = [new Date(i.dateTime), i[type]];
  //     console.log(entry)
  //     data.push(entry);
  //   }
  //   return data;
  // }
  option = {
    title: {
      top: 10,
      left: 'center',
      text: '数据增长热力图'
    },
    tooltip: {
      formatter: function (params) {
        return dateFormater(params.data[0]) + '<br/>' +
          '队员新增数量: ' + params.data[1] + '<br/>' +
          '题目新增数量: ' + params.data[2] + '<br/>' +
          '训练新增次数: ' + params.data[3] + '<br/>' +
          '证书新增数量: ' + params.data[4] + '<br/>';
      }
    },
    visualMap: [
      {
        min: 0,
        max: 100,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 65,
        dimension: 1, // 对应用户新增数量
        pieces: [
          { gte: 0, lte: 3, color: '#c1dcff', },//80 是透明度的十六进制表示（相当于十进制的 128，即 50% 不透明）
          { gte: 4, lte: 10, color: '#97cbfd' },
          { gte: 11, lte: 20, color: '#3991e8' },
          { gte: 21, lte: 100, color: '#0071f5' }
        ]
      },
      {
        min: 0,
        max: 100,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 65,
        dimension: 2, // 对应用户新增数量
        pieces: [
          { gte: 0, lte: 3, color: '#ffc1c1' },
          { gte: 4, lte: 10, color: '#fd9797' },
          { gte: 11, lte: 20, color: '#e83939' },
          { gte: 21, lte: 100, color: '#f50000' }
        ]
      },
      {
        min: 0,
        max: 100,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 65,
        dimension: 3, // 对应训练新增次数
        pieces: [
          { gte: 0, lte: 3, color: '#ffd4c1' },
          { gte: 4, lte: 10, color: '#fdb297' },
          { gte: 11, lte: 20, color: '#e86839' },
          { gte: 21, lte: 100, color: '#f54100' }
        ]
      },
      {
        min: 0,
        max: 100,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 65,
        dimension: 4, // 对应证书新增数量
        pieces: [
          { gte: 0, lte: 3, color: '#c1ffc2'},
          { gte: 4, lte: 10, color: '#9efd97' },
          { gte: 11, lte: 20, color: '#4ae839' },
          { gte: 21, lte: 100, color: '#00f50c' }
        ]
      }
    ],
    calendar: {
      top: 120,
      left: 30,
      height: 150,
      right: 30,
      cellSize: ['auto', 13],
      range: '2024',
      itemStyle: {
        borderWidth: 0.5
      },
      yearLabel: { show: false }
    },
    series: [
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtualData('2024'),
        name: '队员新增数量'
      },
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtualData('2024'),
        name: '题目新增数量'
      },
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtualData('2024'),
        name: '训练新增次数'
      },
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtualData('2024'),
        name: '证书新增数量'
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<template>
  <div id="dateEcharts"></div>
</template>

<style scoped>

</style>
